<template>
  <page-container
    v-loading="listLoading"
    element-loading-background="rgba(255, 255, 255, 0.3)"
  >
    <app-card>
      <template #header>
        数据筛选
      </template>
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        @submit.prevent="onSubmit"
      >
        <el-form-item label="管理员名称">
          <el-input
            v-model="queryParams.name"
            placeholder="Approved by"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              label="禁用"
              value="0"
            />
            <el-option
              label="启用"
              value="1"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            native-type="submit"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </app-card>
    <app-card>
      <template #header>
        <el-button
          @click="handleEdit()"
        >
          添加管理员
        </el-button>
      </template>
      <el-table
        :data="tableData"
      >
        <el-table-column
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="real_name"
          label="姓名"
        />
        <el-table-column
          prop="account"
          label="帐号"
        />
        <el-table-column
          prop="roles"
          label="身份"
        >
          <template #default="scope">
            <el-tag
              v-for="role in scope.row.roles.split(',')"
              :key="role"
              style="margin-right: 4px"
            >
              {{ role }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="_last_time"
          label="最近登录时间"
        />
        <el-table-column
          prop="last_ip"
          label="最近登录IP"
        />
        <el-table-column
          prop="status"
          label="状态"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              class="ml-2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              :loading="scope.row.statusLoading"
              @click="handleStattusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>

            <el-popconfirm title="Are you sure to delete this?">
              <template #reference>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <app-pagination
        v-model:page="queryParams.page"
        v-model:size="queryParams.limit"
        :total="pagiTotal"
        :load-data="loadData"
      />
    </app-card>
  </page-container>
  <admin-form
    v-model="dialogFormVisible"
    v-model:admin-id="adminId"
    @success="handleSuccess"
  />
</template>

<script setup lang='ts'>
import { deleteAdmin, getAdmin, updateAdminStatus } from '@/api/admin';
import { Admin, IlistParams } from '@/api/types/admin';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import AdminForm from './AdminForm.vue';

const dialogFormVisible = ref(false)
const adminId = ref<number>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  name: '',
  role: '',
  status: '' as IlistParams['status']
})
const onSubmit = () => {
  loadData()
}
const listLoading = ref(true)
const tableData = ref([])
const pagiTotal = ref(0)
const loadData = async () => {
  listLoading.value = true
  const data = await getAdmin(queryParams).finally(() => {
    listLoading.value = false
  })
  tableData.value = data.list
  pagiTotal.value = data.count
}
onMounted(() => {
  loadData()
})

const handleDelete = async (id: number) => {
  await deleteAdmin(id)
  ElMessage.success('删除成功')
  loadData()
}
const handleEdit = (row?: Admin) => {
  dialogFormVisible.value = true
  adminId.value = row?.id
}

const handleStattusChange = async (row: Admin) => {
  console.log('change', row.status)
  row.statusLoading = true
  await updateAdminStatus(row.id, row.status).finally(() => {
    row.statusLoading = false
  })
  ElMessage.success('更改成功')
}
const handleSuccess = () => {
  loadData()
  dialogFormVisible.value = false
}

</script>

<style>
  .el-pagination {
    float: right;
  }
</style>
